<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小菜鸟的个人网站</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="wrap">
        <div class="inner">
            <div class="imgBox">
            </div>
        <!-- 第一行，欢迎语 -->
            <div class="row">
            <div class="helloBox col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h1>Hello I'm Partick Jun</h1>
                <h2>山有径可走，海有舟可渡</h2>
                <h2>我叫尹俊</h2>
                <h2>一名想把蓝天当画布的准前端工程师</h2>
                <span class="aboutMeBtn">关于我</span>
            </div>
            </div>
        <!-- 关于我们背景 -->
            <div class="aboutMeBg"></div>
        <!-- section2背景 -->
            <div class="section2bg"></div>
            <div class="section2">
                <!-- 顶部导航栏 -->
                <nav class="headNav navbar navbar-default">
                    <div class="container">
                        <ul>
                            <div class="row">
                            <li class="col-lg-offset-4 col-lg-1
                                       col-md-offset-1 col-md-2
                                       hidden-sm hidden-xs">
                                关于我
                              </li>
                            <li class="col-lg-1
                                       col-md-2
                                       hidden-sm hidden-xs">
                                       求职意向
                                      </li>
                            <li class="col-lg-1
                                       col-md-2
                                       hidden-sm hidden-xs">
                                       技术掌握
                                      </li>
                            <li class="col-lg-1
                                       col-md-2
                                       hidden-sm hidden-xs">
                                       我的经历
                                      </li>
                            <li class="col-lg-1
                                       col-md-2
                                       hidden-sm hidden-xs">
                                       联系我
                                      </li>
                            <li class="hidden-lg hidden-md
                                       col-sm-offset-11 col-sm-1
                                       col-xs-offset-11 col-xs-1">
                            <span class="hideShowBtn glyphicon glyphicon-menu-hamburger"></span>
                            </li>
                            
                            </div>
                          </ul>
                    </div>
                  </nav>
                <div class="row">
                    <div class="hideShow hidden-lg hidden-md
                                col-sm-12 col-xs-12">
                    <span>关于我</span>
                    <span>求职意向</span>
                    <span>技术掌握</span>
                    <span>我的经历</span>
                    <span>联系我</span>
                    </div>
                </div>
                <div class="myInfoBox">
                    <div class="myInfo">
                        <h1>关于我</h1>
                        <hr/>
                        <div class="myImg">
                        </div>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我叫小菜鸟，21岁，来自”星城“长沙，致力成为一名前端工程师，我是计算机班科出生，可是是与前端不相搭边的java。在我致力往前端方向发展之前，我接触过java，php
                            ，拥有一定的代码逻辑和编程思维，给我后期自学前端带来了很大便利。
                        </p>
                        <p>这是我自己做的一个响应式小网站，个别布局尚有不妥，敬请谅解。</p>
                    </div>
                </div>

                <div class="occIntentionBox">
                    <div class="occIntention">
                        <h1>求职意向</h1>
                        <hr>
                        <h2>Web前端开发</h2>
                        <p>我的求职意向是web前端开发实习生，意向工作城市是广州，深圳和长沙。</p>
                        <p>生不用封万户侯，但愿一识韩荆州。</p>
                    </div>
                </div>

                <div class="techBox">
                    <div class="tech">
                        <h1>技术掌握</h1>
                        <hr>
                        <div class="techList">
                            <div class="row">
                            <ul class="front col-lg-offset-1 col-lg-3
                                             col-md-offset-1 col-md-3
                                             col-sm-offset-1 col-sm-3
                                             col-xs-12">
                                前端：
                                <li>语种：HTML,CSS,Javascript</li>
                                <li>UI库：bootstrap,ElementUi,iView</li>
                                <li>框架：vue.js jQuery</li>
                            </ul>
                            <ul class="back col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                后端：
                                <li>语种：java</li>
                                <li>框架：Spring,Spring MVC,MyBatis</li>
                            </ul>
                            <ul class="other col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                其它：
                                <li>数据库：mySql,Sql Server</li>
                                <li>代码管理工具：Git</li>
                            </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="experienceBox">
                    <div class="experience">
                        <h1>我的经历</h1>
                        <hr>
                        <ul>
                            <div class="row">
                            <li class="contentLeft col-lg-offset-3 col-lg-2
                                       col-md-offset-2 col-md-3
                                       hidden-sm hidden-xs">
                                <div class="place1908">
                                    <p>
                                    嘉兴东臣信息有限公司
                                    </p>
                                    <p>
                                    校企实训合作/学徒
                                    </p>
                                    <p>
                                    学习实际项目开发流程和企业级前后端知识，培养独自开发项目的能力
                                    </p>
                                </div>
                                <div class="place1711">锦绣潇湘·乡村游-大学生创客大赛优秀个人奖</div>
                            </li>
                            <li class="time col-lg-1 col-md-2 hidden-sm hidden-xs">
                                <div class="time1908">现在<br> ~ <br>2019/08</div>
                                <div class="time1805">2018/05</div>
                                <div class="time1711">2017/11</div>
                                <div class="time1706">2017/06</div>
                            </li>
                            <li class="contentRight col-lg-offset-1 col-lg-2 col-md-3 col-sm-12 col-xs-12
                                                    hidden-sm hidden-xs">
                                <div class="place1805">湖南省“互联网+”创新创业大赛校级二等奖</div>
                                <div class="place1706">湖南科技职业学院</div>
                            </li>
                            <!-- 低分率显示 -->
                            <li class="hidden-lg hidden-md col-sm-offset-2 col-xs-offset-2 col-sm-6 col-xs-6">
                                <div class="place1908">
                                    <p>
                                        嘉兴东臣信息有限公司
                                        </p>
                                        <p>
                                        校企实训合作/学徒
                                        </p>
                                        <p>
                                        学习实际项目开发流程和企业级前后端知识，培养独自开发项目的能力
                                        </p>
                                </div>
                                <div class="match1">
                                    <div class="place1711">锦绣潇湘·乡村游-大学生创客大赛优秀个人奖</div>
                                </div>
                                <div class="match2">
                                    <div class="place1805">湖南省“互联网+”创新创业大赛校级二等奖</div>
                                </div>
                                <div class="school">
                                    <div class="place1706">湖南科技职业学院</div>
                                </div>
                            </li>
                            <li class="hidden-lg hidden-md col-sm-2 col-xs-2">
                                <div class="time1908">现在<br> ~ <br>2019/08</div>
                                <div class="time1805">2018/05</div>
                                <div class="time1711">2017/11</div>
                                <div class="time1706">2017/06</div>
                            </li>
                        </div>
                        </ul>
                    </div>
                </div>
                <div class="contactBox">
                    <div class="contact">
                        <h1>联系我</h1>
                        <hr>
                        <h2><span>邮箱</span>：5211314@qq.com</h2>
                        <h2><span>电话</span>：17454044314</h2>
                        <div class="row">
                        <div class="qqBox col-lg-offset-3 col-lg-2
                                          col-md-offset-3 col-md-2
                                          col-sm-offset-3 col-sm-2
                                          col-xs-offset-4 col-xs-4">
                            <div class="qqWrap"></div>
                            <div class="qq"></div>
                        </div>
                        <div class="wechatBox col-lg-offset-2 col-lg-2 
                                              col-md-offset-2 col-md-2 
                                              col-sm-offset-2 col-sm-2 
                                              col-xs-offset-4 col-xs-4">
                            <div class="wechatWrap"></div>
                            <div class="wechat"></div>
                        </div>
                        </div>
                    </div>
                </div>
        </div>
            </div>
       

        
        </div>
    </div>
    <script src="js/style.js"></script>
    <script src="js/scroll.js"></script>
</body>
</html>